<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
表单和输入
<!--
表单是一个包含表单元素的区域。
文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)
输入标签（<input>）,输入类型是由类型属性（type）定义的。同时，在大多数浏览器中，文本域的缺省宽度是20个字符

text  文本域
password  密码
radio  单选按钮
checkbox  复选框
Submit  提交按钮
select 下拉列表
button 按钮
reset  重置  点击之后会将重置按钮所在的表单中填写的内容清空。
-->


<!--
<form> 	定义供用户输入的表单
<input> 	定义输入域
<textarea> 	定义文本域 (一个多行的输入控件)
<label> 	定义了 <input> 元素的标签，一般为输入标题
<fieldset> 	定义了一组相关的表单元素，并使用外框包含起来
<legend> 	定义了 <fieldset> 元素的标题
<select> 	定义了下拉选项列表
<optgroup> 	定义选项组
<option> 	定义下拉列表中的选项
<button> 	定义一个点击按钮
<datalist>New 	指定一个预先定义的输入控件选项列表
<keygen>New 	定义了表单的密钥对生成器字段
<output>New 	定义一个计算结果-->




<form name="input" action="html_form_action.php" method="get">
    readonly: <input type="text" name="hha" readonly="readonly"><br>
    disabled: <input type="text" name="hha" disabled="disabled"><br>
    Username: <input type="text" name="user"><br>
    Password: <input type="password" name="password"><br>
    <input type="radio" name="sex" value="male" checked="checked">Male<br>
    <input type="radio" name="sex" value="female">Female<br>
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car" checked="checked">I have a car<br>
    <select name="cars">
        <option value="volvo">Volvo</option>
        <option value="saab" selected>Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
    </select>
    <input type="submit" value="Submit">
    <input type="button" value="Hello world!">
</form>

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

<form action="">
    <fieldset>
        <legend>Personal information:</legend>
        Name: <input type="text" size="30"><br>
        E-mail: <input type="text" size="30"><br>
        Date of birth: <input type="text" size="10">
    </fieldset>
</form>
<h3>发送邮件到 someone@example.com:</h3>

<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
    Name:<br>
    <input type="text" name="name" value="your name"><br>
    E-mail:<br>
    <input type="text" name="mail" value="your email"><br>
    Comment:<br>
    <input type="text" name="comment" value="your comment" size="50"><br><br>
    <input type="submit" value="发送">
    <input type="reset" value="重置">
</form>


框架
<!--通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。-->
<!--该URL指向不同的网页。
height 和 width 属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%")。

frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 "0" 移除iframe的边框:
-->

<iframe src="html1.html" width="200" height="200" frameborder="0"></iframe>
<!--使用iframe来显示目标链接页面
iframe可以显示一个目标链接的页面
目标链接的属性必须使用iframe的属性，如下实例:-->
<iframe src="html1.html" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

Web安全色
<table border="1" width="100%">
<tbody><tr>
    <td style="color:#ffffff" bgcolor="#000000" align="center">000000</td>
    <td style="color:#ffffff" bgcolor="#000033" align="center">000033</td>
    <td style="color:#ffffff" bgcolor="#000066" align="center">000066</td>
    <td style="color:#ffffff" bgcolor="#000099" align="center">000099</td>
    <td style="color:#ffffff" bgcolor="#0000cc" align="center">0000CC</td>
    <td style="color:#ffffff" bgcolor="#0000ff" align="center">0000FF</td>
</tr>
<tr>
    <td style="color:#ffffff" bgcolor="#003300" align="center">003300</td>
    <td style="color:#ffffff" bgcolor="#003333" align="center">003333</td>
    <td style="color:#ffffff" bgcolor="#003366" align="center">003366</td>
    <td style="color:#ffffff" bgcolor="#003399" align="center">003399</td>
    <td style="color:#ffffff" bgcolor="#0033cc" align="center">0033CC</td>
    <td style="color:#ffffff" bgcolor="#0033ff" align="center">0033FF</td>
</tr>
<tr>
    <td style="color:#ffffff" bgcolor="#006600" align="center">006600</td>
    <td style="color:#ffffff" bgcolor="#006633" align="center">006633</td>
    <td style="color:#ffffff" bgcolor="#006666" align="center">006666</td>
    <td style="color:#ffffff" bgcolor="#006699" align="center">006699</td>
    <td style="color:#ffffff" bgcolor="#0066cc" align="center">0066CC</td>
    <td style="color:#ffffff" bgcolor="#0066ff" align="center">0066FF</td>
</tr>
<tr>
    <td bgcolor="#009900" align="center">009900</td>
    <td bgcolor="#009933" align="center">009933</td>
    <td bgcolor="#009966" align="center">009966</td>
    <td bgcolor="#009999" align="center">009999</td>
    <td bgcolor="#0099cc" align="center">0099CC</td>
    <td bgcolor="#0099ff" align="center">0099FF</td>
</tr>
<tr>
    <td bgcolor="#00cc00" align="center">00CC00</td>
    <td bgcolor="#00cc33" align="center">00CC33</td>
    <td bgcolor="#00cc66" align="center">00CC66</td>
    <td bgcolor="#00cc99" align="center">00CC99</td>
    <td bgcolor="#00cccc" align="center">00CCCC</td>
    <td bgcolor="#00ccff" align="center">00CCFF</td>
</tr>
<tr>
    <td bgcolor="#00ff00" align="center">00FF00</td>
    <td bgcolor="#00ff33" align="center">00FF33</td>
    <td bgcolor="#00ff66" align="center">00FF66</td>
    <td bgcolor="#00ff99" align="center">00FF99</td>
    <td bgcolor="#00ffcc" align="center">00FFCC</td>
    <td bgcolor="#00ffff" align="center">00FFFF</td>
</tr>
<tr>
    <td style="color:#ffffff" bgcolor="#330000" align="center">330000</td>
    <td style="color:#ffffff" bgcolor="#330033" align="center">330033</td>
    <td style="color:#ffffff" bgcolor="#330066" align="center">330066</td>
    <td style="color:#ffffff" bgcolor="#330099" align="center">330099</td>
    <td style="color:#ffffff" bgcolor="#3300cc" align="center">3300CC</td>
    <td style="color:#ffffff" bgcolor="#3300ff" align="center">3300FF</td>
</tr>
<tr>
    <td style="color:#ffffff" bgcolor="#333300" align="center">333300</td>
    <td style="color:#ffffff" bgcolor="#333333" align="center">333333</td>
    <td style="color:#ffffff" bgcolor="#333366" align="center">333366</td>
    <td style="color:#ffffff" bgcolor="#333399" align="center">333399</td>
    <td style="color:#ffffff" bgcolor="#3333cc" align="center">3333CC</td>
    <td style="color:#ffffff" bgcolor="#3333ff" align="center">3333FF</td>
</tr>
<tr>
    <td style="color:#ffffff" bgcolor="#336600" align="center">336600</td>
    <td style="color:#ffffff" bgcolor="#336633" align="center">336633</td>
    <td style="color:#ffffff" bgcolor="#336666" align="center">336666</td>
    <td style="color:#ffffff" bgcolor="#336699" align="center">336699</td>
    <td style="color:#ffffff" bgcolor="#3366cc" align="center">3366CC</td>
    <td style="color:#ffffff" bgcolor="#3366ff" align="center">3366FF</td>
</tr>
<tr>
    <td bgcolor="#339900" align="center">339900</td>
    <td bgcolor="#339933" align="center">339933</td>
    <td bgcolor="#339966" align="center">339966</td>
    <td bgcolor="#339999" align="center">339999</td>
    <td bgcolor="#3399cc" align="center">3399CC</td>
    <td bgcolor="#3399ff" align="center">3399FF</td>
</tr>
<tr>
    <td bgcolor="#33cc00" align="center">33CC00</td>
    <td bgcolor="#33cc33" align="center">33CC33</td>
    <td bgcolor="#33cc66" align="center">33CC66</td>
    <td bgcolor="#33cc99" align="center">33CC99</td>
    <td bgcolor="#33cccc" align="center">33CCCC</td>
    <td bgcolor="#33ccff" align="center">33CCFF</td>
</tr>
<tr>
    <td bgcolor="#33ff00" align="center">33FF00</td>
    <td bgcolor="#33ff33" align="center">33FF33</td>
    <td bgcolor="#33ff66" align="center">33FF66</td>
    <td bgcolor="#33ff99" align="center">33FF99</td>
    <td bgcolor="#33ffcc" align="center">33FFCC</td>
    <td bgcolor="#33ffff" align="center">33FFFF</td>
</tr>
<tr>
    <td style="color:#ffffff" bgcolor="#660000" align="center">660000</td>
    <td style="color:#ffffff" bgcolor="#660033" align="center">660033</td>
    <td style="color:#ffffff" bgcolor="#660066" align="center">660066</td>
    <td style="color:#ffffff" bgcolor="#660099" align="center">660099</td>
    <td style="color:#ffffff" bgcolor="#6600cc" align="center">6600CC</td>
    <td style="color:#ffffff" bgcolor="#6600ff" align="center">6600FF</td>
</tr>
<tr>
    <td style="color:#ffffff" bgcolor="#663300" align="center">663300</td>
    <td style="color:#ffffff" bgcolor="#663333" align="center">663333</td>
    <td style="color:#ffffff" bgcolor="#663366" align="center">663366</td>
    <td style="color:#ffffff" bgcolor="#663399" align="center">663399</td>
    <td style="color:#ffffff" bgcolor="#6633cc" align="center">6633CC</td>
    <td style="color:#ffffff" bgcolor="#6633ff" align="center">6633FF</td>
</tr>
<tr>
    <td style="color:#ffffff" bgcolor="#666600" align="center">666600</td>
    <td style="color:#ffffff" bgcolor="#666633" align="center">666633</td>
    <td style="color:#ffffff" bgcolor="#666666" align="center">666666</td>
    <td style="color:#ffffff" bgcolor="#666699" align="center">666699</td>
    <td style="color:#ffffff" bgcolor="#6666cc" align="center">6666CC</td>
    <td style="color:#ffffff" bgcolor="#6666ff" align="center">6666FF</td>
</tr>
<tr>
    <td bgcolor="#669900" align="center">669900</td>
    <td bgcolor="#669933" align="center">669933</td>
    <td bgcolor="#669966" align="center">669966</td>
    <td bgcolor="#669999" align="center">669999</td>
    <td bgcolor="#6699cc" align="center">6699CC</td>
    <td bgcolor="#6699ff" align="center">6699FF</td>
</tr>
<tr>
    <td bgcolor="#66cc00" align="center">66CC00</td>
    <td bgcolor="#66cc33" align="center">66CC33</td>
    <td bgcolor="#66cc66" align="center">66CC66</td>
    <td bgcolor="#66cc99" align="center">66CC99</td>
    <td bgcolor="#66cccc" align="center">66CCCC</td>
    <td bgcolor="#66ccff" align="center">66CCFF</td>
</tr>
<tr>
    <td bgcolor="#66ff00" align="center">66FF00</td>
    <td bgcolor="#66ff33" align="center">66FF33</td>
    <td bgcolor="#66ff66" align="center">66FF66</td>
    <td bgcolor="#66ff99" align="center">66FF99</td>
    <td bgcolor="#66ffcc" align="center">66FFCC</td>
    <td bgcolor="#66ffff" align="center">66FFFF</td>
</tr>
<tr>
    <td style="color:#ffffff" bgcolor="#990000" align="center">990000</td>
    <td style="color:#ffffff" bgcolor="#990033" align="center">990033</td>
    <td style="color:#ffffff" bgcolor="#990066" align="center">990066</td>
    <td style="color:#ffffff" bgcolor="#990099" align="center">990099</td>
    <td style="color:#ffffff" bgcolor="#9900cc" align="center">9900CC</td>
    <td style="color:#ffffff" bgcolor="#9900ff" align="center">9900FF</td>
</tr>
<tr>
    <td style="color:#ffffff" bgcolor="#993300" align="center">993300</td>
    <td style="color:#ffffff" bgcolor="#993333" align="center">993333</td>
    <td style="color:#ffffff" bgcolor="#993366" align="center">993366</td>
    <td style="color:#ffffff" bgcolor="#993399" align="center">993399</td>
    <td style="color:#ffffff" bgcolor="#9933cc" align="center">9933CC</td>
    <td style="color:#ffffff" bgcolor="#9933ff" align="center">9933FF</td>
</tr>
<tr>
    <td style="color:#ffffff" bgcolor="#996600" align="center">996600</td>
    <td style="color:#ffffff" bgcolor="#996633" align="center">996633</td>
    <td style="color:#ffffff" bgcolor="#996666" align="center">996666</td>
    <td style="color:#ffffff" bgcolor="#996699" align="center">996699</td>
    <td style="color:#ffffff" bgcolor="#9966cc" align="center">9966CC</td>
    <td style="color:#ffffff" bgcolor="#9966ff" align="center">9966FF</td>
</tr>
<tr>
    <td bgcolor="#999900" align="center">999900</td>
    <td bgcolor="#999933" align="center">999933</td>
    <td bgcolor="#999966" align="center">999966</td>
    <td bgcolor="#999999" align="center">999999</td>
    <td bgcolor="#9999cc" align="center">9999CC</td>
    <td bgcolor="#9999ff" align="center">9999FF</td>
</tr>
<tr>
    <td bgcolor="#99cc00" align="center">99CC00</td>
    <td bgcolor="#99cc33" align="center">99CC33</td>
    <td bgcolor="#99cc66" align="center">99CC66</td>
    <td bgcolor="#99cc99" align="center">99CC99</td>
    <td bgcolor="#99cccc" align="center">99CCCC</td>
    <td bgcolor="#99ccff" align="center">99CCFF</td>
</tr>
<tr>
    <td bgcolor="#99ff00" align="center">99FF00</td>
    <td bgcolor="#99ff33" align="center">99FF33</td>
    <td bgcolor="#99ff66" align="center">99FF66</td>
    <td bgcolor="#99ff99" align="center">99FF99</td>
    <td bgcolor="#99ffcc" align="center">99FFCC</td>
    <td bgcolor="#99ffff" align="center">99FFFF</td>
</tr>
<tr>
    <td style="color:#ffffff" bgcolor="#cc0000" align="center">CC0000</td>
    <td style="color:#ffffff" bgcolor="#cc0033" align="center">CC0033</td>
    <td style="color:#ffffff" bgcolor="#cc0066" align="center">CC0066</td>
    <td style="color:#ffffff" bgcolor="#cc0099" align="center">CC0099</td>
    <td style="color:#ffffff" bgcolor="#cc00cc" align="center">CC00CC</td>
    <td style="color:#ffffff" bgcolor="#cc00ff" align="center">CC00FF</td>
</tr>
<tr>
    <td style="color:#ffffff" bgcolor="#cc3300" align="center">CC3300</td>
    <td style="color:#ffffff" bgcolor="#cc3333" align="center">CC3333</td>
    <td style="color:#ffffff" bgcolor="#cc3366" align="center">CC3366</td>
    <td style="color:#ffffff" bgcolor="#cc3399" align="center">CC3399</td>
    <td style="color:#ffffff" bgcolor="#cc33cc" align="center">CC33CC</td>
    <td style="color:#ffffff" bgcolor="#cc33ff" align="center">CC33FF</td>
</tr>
<tr>
    <td style="color:#ffffff" bgcolor="#cc6600" align="center">CC6600</td>
    <td style="color:#ffffff" bgcolor="#cc6633" align="center">CC6633</td>
    <td style="color:#ffffff" bgcolor="#cc6666" align="center">CC6666</td>
    <td style="color:#ffffff" bgcolor="#cc6699" align="center">CC6699</td>
    <td style="color:#ffffff" bgcolor="#cc66cc" align="center">CC66CC</td>
    <td style="color:#ffffff" bgcolor="#cc66ff" align="center">CC66FF</td>
</tr>
<tr>
    <td bgcolor="#cc9900" align="center">CC9900</td>
    <td bgcolor="#cc9933" align="center">CC9933</td>
    <td bgcolor="#cc9966" align="center">CC9966</td>
    <td bgcolor="#cc9999" align="center">CC9999</td>
    <td bgcolor="#cc99cc" align="center">CC99CC</td>
    <td bgcolor="#cc99ff" align="center">CC99FF</td>
</tr>
<tr>
    <td bgcolor="#cccc00" align="center">CCCC00</td>
    <td bgcolor="#cccc33" align="center">CCCC33</td>
    <td bgcolor="#cccc66" align="center">CCCC66</td>
    <td bgcolor="#cccc99" align="center">CCCC99</td>
    <td bgcolor="#cccccc" align="center">CCCCCC</td>
    <td bgcolor="#ccccff" align="center">CCCCFF</td>
</tr>
<tr>
    <td bgcolor="#ccff00" align="center">CCFF00</td>
    <td bgcolor="#ccff33" align="center">CCFF33</td>
    <td bgcolor="#ccff66" align="center">CCFF66</td>
    <td bgcolor="#ccff99" align="center">CCFF99</td>
    <td bgcolor="#ccffcc" align="center">CCFFCC</td>
    <td bgcolor="#ccffff" align="center">CCFFFF</td>
</tr>
<tr>
    <td style="color:#ffffff" bgcolor="#ff0000" align="center">FF0000</td>
    <td style="color:#ffffff" bgcolor="#ff0033" align="center">FF0033</td>
    <td style="color:#ffffff" bgcolor="#ff0066" align="center">FF0066</td>
    <td style="color:#ffffff" bgcolor="#ff0099" align="center">FF0099</td>
    <td style="color:#ffffff" bgcolor="#ff00cc" align="center">FF00CC</td>
    <td style="color:#ffffff" bgcolor="#ff00ff" align="center">FF00FF</td>
</tr>
<tr>
    <td style="color:#ffffff" bgcolor="#ff3300" align="center">FF3300</td>
    <td style="color:#ffffff" bgcolor="#ff3333" align="center">FF3333</td>
    <td style="color:#ffffff" bgcolor="#ff3366" align="center">FF3366</td>
    <td style="color:#ffffff" bgcolor="#ff3399" align="center">FF3399</td>
    <td style="color:#ffffff" bgcolor="#ff33cc" align="center">FF33CC</td>
    <td style="color:#ffffff" bgcolor="#ff33ff" align="center">FF33FF</td>
</tr>
<tr>
    <td style="color:#ffffff" bgcolor="#ff6600" align="center">FF6600</td>
    <td style="color:#ffffff" bgcolor="#ff6633" align="center">FF6633</td>
    <td style="color:#ffffff" bgcolor="#ff6666" align="center">FF6666</td>
    <td style="color:#ffffff" bgcolor="#ff6699" align="center">FF6699</td>
    <td style="color:#ffffff" bgcolor="#ff66cc" align="center">FF66CC</td>
    <td style="color:#ffffff" bgcolor="#ff66ff" align="center">FF66FF</td>
</tr>
<tr>
    <td bgcolor="#ff9900" align="center">FF9900</td>
    <td bgcolor="#ff9933" align="center">FF9933</td>
    <td bgcolor="#ff9966" align="center">FF9966</td>
    <td bgcolor="#ff9999" align="center">FF9999</td>
    <td bgcolor="#ff99cc" align="center">FF99CC</td>
    <td bgcolor="#ff99ff" align="center">FF99FF</td>
</tr>
<tr>
    <td bgcolor="#ffcc00" align="center">FFCC00</td>
    <td bgcolor="#ffcc33" align="center">FFCC33</td>
    <td bgcolor="#ffcc66" align="center">FFCC66</td>
    <td bgcolor="#ffcc99" align="center">FFCC99</td>
    <td bgcolor="#ffcccc" align="center">FFCCCC</td>
    <td bgcolor="#ffccff" align="center">FFCCFF</td>
</tr>
<tr>
    <td bgcolor="#ffff00" align="center">FFFF00</td>
    <td bgcolor="#ffff33" align="center">FFFF33</td>
    <td bgcolor="#ffff66" align="center">FFFF66</td>
    <td bgcolor="#ffff99" align="center">FFFF99</td>
    <td bgcolor="#ffffcc" align="center">FFFFCC</td>
    <td bgcolor="#ffffff" align="center">FFFFFF</td>
</tr>
</tbody>
</table>

</body>
</html>